<template>
  <div class="main">
    <top-bar></top-bar>
    <div class="main-mains w90">
      <div class="main-mains-l">
        <router-link to="/main">
          <div class="main-mains-l-return">
            <span>←</span>
            返回首页
          </div>
        </router-link>
        <div class="active">合理化建议</div>
      </div>
      <div class="main-mains-r">
        <div class="main-details">
          <div class="details-top" @click="returnUpper()">← 返回</div>
          <div class="main-details-main">
            <table>
              <tr>
                <td>姓名</td>
                <td>{{details.personName}}</td>
              </tr>
              <tr>
                <td>工号</td>
                <td>{{details.workNo}}</td>
              </tr>
              <tr>
                <td>电话号码</td>
                <td>{{details.phone}}</td>
              </tr>
              <tr>
                <td>时间</td>
                <td>{{details.createtime}}</td>
              </tr>
              <tr>
                <td>详细建议</td>
                <td>{{details.context}}</td>
              </tr>
              <tr>
                <td>描述图片</td>
                <td>
                  <a :href="details.imgUrl" target="_blank">
                    <img :src="details.imgUrl" alt>
                  </a>
                </td>
              </tr>
            </table>
          </div>
          <div class="feed-content clear" v-show="feedContent">
            <div class="feed-content-l">反馈内容</div>
            <div class="feed-content-r" v-text="feedContent"></div>
          </div>
          <div class="feed-back" @click="showFeedBack()">反馈消息</div>
        </div>
      </div>
    </div>
    <div class="mask" v-show="feedBack"></div>
    <div class="property-mask" v-show="feedBack">
      <div class="property-mask-top">反馈消息</div>
      <div class="property-content">
        <el-input type="textarea" maxlength="100" placeholder="请输入反馈内容" v-model.trim="message"></el-input>
      </div>
      <div class="property-mask-btn clear">
        <div class="fl" @click="closeMask()">取消</div>
        <div class="fl" @click="uploadSure()">确定</div>
      </div>
    </div>
  </div>
</template>

<script>
import topBar from "../public/top";
export default {
  components: {
    topBar
  },
  data() {
    return {
      details: "",
      id: this.$route.params.id,
      feedBack: false,
      message: "",
      feedContent: ""
    };
  },
  methods: {
    getfeedBack() {
      let _this = this;
      let datas = {
        parentId: _this.id
      };
      _this
        .$http({
          url: _this.urls + "/feedBack/findByIdParentId",
          method: "post",
          data: datas
        })
        .then(function(res) {
          let data = res.data;
          if (data.status == "success") {
            _this.feedContent = data.data.message;
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    closeMask() {
      this.feedBack = false;
    },
    showFeedBack() {
      this.feedBack = true;
    },
    uploadSure() {
      let _this = this;
      let datas = {
        parentId: _this.id,
        type: "advise",
        code: "advise",
        message: _this.message
      };
      datas = JSON.stringify(datas);
      _this
        .$http({
          url: _this.urls + "/feedBack/add",
          method: "post",
          data: datas
        })
        .then(function(res) {
          let data = res.data;
          if (data.status == "success") {
            _this.$message({
              showClose: true,
              message: "反馈成功!",
              type: "success"
            });
            _this.feedBack = false;
            _this.getfeedBack();
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    returnUpper() {
      history.go(-1);
    },
    getData() {
      let _this = this;
      let datas = {
        id: _this.id
      };
      datas = JSON.stringify(datas);
      _this
        .$http({
          url: _this.urls + "/membership/findById.do" + "?id=" + _this.id,
          method: "post",
          data: datas
        })
        .then(function(res) {
          let data = res.data;
          if (data.status == "success") {
            _this.details = data.data;
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  },
  mounted() {
    this.getData();
    this.getfeedBack();
  }
};
</script>

<style lang="less" scoped>
@import "suggest.less";
</style>

